<template>
  <div>
    <!-- 双向数据绑定：把变量和表单元素绑定在一起，表单元素的值变化，会同步更新变量 -->
    <table>
      <tbody>
        <tr>
          <td>性别</td>
          <td>
            <input type="radio" v-model="gender" name="sex" value="0">男<br/>
            <input type="radio" v-model="gender" name="sex" value="1">女
          </td>
        </tr>

        <tr>
          <td>阿斌的特长:{{ specs }}</td>
          <td>
            <input v-model="specs" type="checkbox" value="0" />吃
            <br />
            <input v-model="specs" type="checkbox" value="1" />喝
            <br />
            <input v-model="specs" type="checkbox" value="2" />唱
            <br />
            <input v-model="specs" type="checkbox" value="3" />跳
            <br />
            <input v-model="specs" type="checkbox" value="4"/>打篮球 <br />
          </td>
        </tr>

        <tr>
          <td>是否同意蔡徐坤的交往请求:{{agree}}</td>
          <td>
            <input type="checkbox" v-model="agree">
          </td>
        </tr>

        <tr>
          <td>蔡徐坤的座驾:{{tool}}</td>
          <td>
            <select v-model="tool">
              <option value="0">亚跌</option>
              <option value="1">小妞</option>
              <option value="2">公交车</option>
              <option value="3">共享单车</option>
              <option value="4">自行车</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        gender: 0,
        // 多选的值，用数组来存储
        specs:[],
        // 是否勾选：值是布尔型
        agree:true,
        // 工具
        tool:0,
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>